<template>
  <div class="realNameConfirm">
    <a-table
      :columns="columns"
      :data-source="tableData"
      :loading="tableLoading"
      :pagination="pagination"
      @change="pageChange"
      :rowKey="rowKey"
    >
      <template slot="imgSrc1" slot-scope="text, record, index">
        <a-icon v-if="record.idCardImages" type="security-scan" @click="preview[index] = true" theme="twoTone"
                style="font-size: 24px;"/>
        <span v-else>暂无图片</span>
        <a-modal :visible="preview[index]" :footer="null" @cancel="handleCancel(index)" :destroyOnClose="true">
          <img alt="example" style="width: 100%" :src="record.imgSrc1"/>
        </a-modal>
      </template>
      <template slot="imgSrc2" slot-scope="text, record, index">
        <a-icon v-if="record.idCardImages" type="security-scan" @click="preview1[index] = true" theme="twoTone"
                style="font-size: 24px;"/>
        <span v-else>暂无图片</span>
        <a-modal :visible="preview1[index]" :footer="null" @cancel="handleCancel1(index)" :destroyOnClose="true">
          <img alt="example" style="width: 100%" :src="record.imgSrc2"/>
        </a-modal>
      </template>
      <template slot="operate" slot-scope="text, record">
        <a-button
          v-if="record.realNameVerificationStatus !== 3"
          type="primary"
          size="small"
          @click="checkDetail(record, 3)"
        >通过
        </a-button
        >
        <a-button
          v-if="record.realNameVerificationStatus !== 3"
          type="danger"
          size="small"
          @click="checkDetail(record, 2)"
          style="margin-left: 10px"
        >不通过
        </a-button
        >
        <span v-if="record.realNameVerificationStatus === 3">通过</span>
        <span v-if="record.realNameVerificationStatus === 2">不通过</span>
      </template>
    </a-table>
    <div ref="modalHtml">
      <a-modal v-model="visible" :title="title" :footer="null" :getContainer="() => $refs.modalHtml">
        <a-form-model :model="modalForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" ref="ruleForm">
          <a-form-model-item label="原因">
            <a-textarea v-model="modalForm.remark" :rows="4"/>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 1 }">
            <a-button type="primary" @click="submit">提交</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
  import { pendingReviewPage, showIdCard, updateVerifiedStatus } from '../../serves';

  export default {
    name: 'RealNameConfirm',
    data() {
      return {
        columns: [
          {
            title: '姓名',
            dataIndex: 'username',
            key: 'username'
          },
          {
            title: '姓名',
            dataIndex: 'realName',
            key: 'realName'
          },
          {
            title: '身份证号',
            dataIndex: 'idCard',
            key: 'idCard'
          },
          {
            title: '身份证照片1',
            dataIndex: 'imgSrc1',
            key: 'imgSrc1',
            scopedSlots: {customRender: 'imgSrc1'}
          },
          {
            title: '身份证照片2',
            dataIndex: 'imgSrc2',
            key: 'imgSrc2',
            scopedSlots: {customRender: 'imgSrc2'}
          },
          {
            title: '认证状态',
            dataIndex: 'realNameVerificationStatus',
            key: 'realNameVerificationStatus',
            customRender: (val) => {
              if (val == 1) {
                return '待认证';
              } else if (val == 2) {
                return '认证失败';
              } else if (val == 3) {
                return '认证成功';
              } else {
                return '用户未认证';
              }
            }
          },
          {
            title: '操作',
            dataIndex: 'operate',
            key: 'operate',
            ellipsis: true,
            scopedSlots: {customRender: 'operate'}
          }
        ],
        tableLoading: false,
        tableData: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50']
        },
        lastPageSize: 10,
        preview: {
          0: false,
          1: false,
          2: false,
          3: false,
          4: false,
          5: false,
          6: false,
          7: false,
          8: false,
          9: false
        },
        preview1: {
          0: false,
          1: false,
          2: false,
          3: false,
          4: false,
          5: false,
          6: false,
          7: false,
          8: false,
          9: false
        },
        modalForm: {
          remark: ''
        },
        title: '认证不通过原因',
        visible: false,
        id: '',
        result: ''
      };
    },
    mounted() {
      this.handleQuery();
    },
    methods: {
      handleCancel(index) {
        this.preview[index] = false;
      },
      handleCancel1(index) {
        this.preview1[index] = false;
      },
      submit() {
        if (!this.modalForm.remark) {
          this.$message.warning('原因不能为空！')
        } else {
          this.updateStatus(this.id, this.result)
        }
      },
      updateStatus(val1, val2) {
        let params = {
          userId: val1,
          result: val2,
          remark: this.modalForm.remark
        };
        updateVerifiedStatus(params).then((res) => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.modalForm.remark = ''
            this.handleQuery();
            this.visible = false
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({
              path: '/manageLogin'
            });
          } else {
            this.$message.warning(res.data.message);
          }
        });
      },
      checkDetail(val1, val2) {
        this.id = val1.id
        this.result = val2
        if (val2 == 2) {
          this.visible = true
        } else {
          this.updateStatus(this.id, this.result)
        }
      },
      handleQuery() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        };
        this.tableLoading = true;
        pendingReviewPage(params)
          .then((res) => {
            if (res.status == 200 && res.data.status.code == 200) {
              this.tableData = res.data.data.records;
              this.tableLoading = false;
              this.pagination.total = res.data.data.total;
            } else if (res.data.status.code == 450) {
              this.$message.warning(res.data.message);
              this.$router.push({
                path: '/manageLogin'
              });
            } else {
              this.$message.warning(res.data.message);
              this.tableLoading = false;
            }
          })
          .then(() => {
            this.tableData.forEach((el, i) => {
              if (el.idCardImages) {
                let params1 = {
                  userId: el.id,
                  image: el.idCardImages.split(',')[0]
                };
                showIdCard(params1).then((res) => {
                  el.imgSrc1 = res.data.data;
                });
                let params2 = {
                  userId: el.id,
                  image: el.idCardImages.split(',')[1]
                };
                showIdCard(params2).then((res) => {
                  el.imgSrc2 = res.data.data;
                });
              }
            });
          });
      },
      pageChange(val) {
        this.pagination.pageSize = val.pageSize;
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1;
          this.lastPageSize = val.pageSize;
        } else {
          this.pagination.current = val.current;
        }
        this.handleQuery();
      },
      rowKey(record, index) {
        return index;
      }
    }
  };
</script>

<style scoped lang="scss">
  .realNameConfirm {
  }
</style>
